/* Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
'use strict'

angular.module('flowableModeler').controller('FormBuilderController', [
  '$rootScope',
  '$scope',
  '$translate',
  '$http',
  '$timeout',
  '$location',
  '$modal',
  '$routeParams',
  '$popover',
  'FormBuilderService',
  function(
    $rootScope,
    $scope,
    $translate,
    $http,
    $timeout,
    $location,
    $modal,
    $routeParams,
    $popover,
    FormBuilderService
  ) {
    // Main page (needed for visual indicator of current page)
    $rootScope.setMainPageById('forms')

    // Needs to be on root scope to be available in the toolbar controller
    $rootScope.formBuilder = { activeTab: 'design' }

    $scope.model = {
      //为true时使用定制结果
      useOutcomes: false
    }

    $scope.colNums = FORM_TOOLBAR_CONFIG.colNums
    $rootScope.currentReadonlyFields = { fields: {} }

    $scope.$watch('model.useOutcomes', function(value) {
      if (value) {
        if (!$rootScope.currentOutcomes || $rootScope.currentOutcomes.length === 0) {
          $rootScope.currentOutcomes = [{ name: '' }]
        }
      } else {
        $rootScope.currentOutcomes = []
      }
    })

    // tabs for tab-control. NOT using templates for the tabs, we control the view
    // ourselves, based on the active tab binding
    $scope.tabs = [
      {
        id: 'design',
        title: 'FORM-BUILDER.TITLE.DESIGN'
      },
      {
        id: 'outcome',
        title: 'FORM-BUILDER.TITLE.OUTCOME'
      }
    ]

    $scope.form = {
      name: '',
      key: '',
      description: '',
      version: 1
    }

    $scope.formElements = []
    $rootScope.currentOutcomes = []

    $rootScope.formChanges = false

    var guidSequence = 0

    function setFieldDragDropAttributes(field, prefix) {
      if (!field._guid) {
        field._guid = prefix + guidSequence++
      }

      if (!field._width) {
        field._width = 1
      }
    }

    var lastDropArrayTarget = null

    $scope.onFieldMoved = function(field, fieldArraySource) {}

    $scope.onFieldDrop = function(paletteElementOrField, dropArrayTarget, event, index) {
      // Is it an existing object?
      if (paletteElementOrField.hasOwnProperty('_guid')) {
        lastDropArrayTarget = dropArrayTarget

        if (dropArrayTarget) {
          var i = -1
          dropArrayTarget.forEach(function(f, index) {
            if (paletteElementOrField._guid == f._guid) {
              i = index
            }
          })
          if (i != -1) {
            dropArrayTarget.splice(i, 1)
          }
        }

        if (navigator.appVersion.indexOf('MSIE 9') != -1) {
          // update _guid which is what ngRepeat is tracking by to force dom updates
          paletteElementOrField._guid += '_'
        }
        return paletteElementOrField
      }

      lastDropArrayTarget = null

      var fieldId = paletteElementOrField.type
      var fieldType

      if (fieldId === 'radio-buttons' || fieldId === 'dropdown') {
        fieldType = 'OptionFormField'
      } else if (fieldId === 'expression') {
        fieldType = 'ExpressionFormField'
      }

      var field = {
        type: fieldId,
        fieldType: fieldType,
        name: 'Label',
        required: false,
        readOnly: false
      }
      setFieldDragDropAttributes(field, 'newField')

      if (fieldId === 'radio-buttons') {
        field.options = [
          {
            name: $translate.instant('FORM-BUILDER.COMPONENT.RADIO-BUTTON-DEFAULT')
          }
        ]
      }

      if (fieldId === 'dropdown') {
        field.options = [{ name: $translate.instant('FORM-BUILDER.COMPONENT.DROPDOWN-DEFAULT-EMPTY-SELECTION') }]
        field.value = field.options[0]
        field.hasEmptyValue = true
      }

      if(fieldId === 'table') {
        field.params = {}
      }

      return field
    }
    //页面初始化
    if ($routeParams.modelId) {
      var url
      if ($routeParams.modelHistoryId) {
        url = FLOWABLE.APP_URL.getFormModelHistoryUrl($routeParams.modelId, $routeParams.modelHistoryId)
      } else {
        url = FLOWABLE.APP_URL.getFormModelUrl($routeParams.modelId)
      }

      $http({ method: 'GET', url: url })
        .success(function(response, status, headers, config) {
          if (response.formDefinition.fields) {
            for (var i = 0; i < response.formDefinition.fields.length; i++) {
              var field = response.formDefinition.fields[i]
              if (!field.params) {
                field.params = {}
              }
              setFieldDragDropAttributes(field, 'savedField')
            }

            $scope.formElements = response.formDefinition.fields
          } else {
            $scope.formElements = []
          }
          if (response.formDefinition.outcomes) {
            $rootScope.currentOutcomes = response.formDefinition.outcomes
            if ($rootScope.currentOutcomes.length > 0) {
              $scope.model.useOutcomes = true
            }
          } else {
            $rootScope.currentOutcomes = []
          }
          $rootScope.currentForm = response
          delete $rootScope.currentForm.formDefinition

          $rootScope.formItems = $scope.formElements

          $rootScope.formChanges = false
          $timeout(function() {
            // Flip switch in timeout to start watching all form-related models
            // after next digest cycle, to prevent first false-positive
            $scope.formLoaded = true
          }, 200)
        })
        .error(function(response, status, headers, config) {
          $scope.model.loading = false
        })
    } else {
      $scope.formLoaded = true
    }
    //表单元素
    $scope.palletteElements = [
      {
        type: 'text',
        title: $translate.instant('FORM-BUILDER.PALLETTE.TEXT'),
        icon: 'images/form-builder/textfield-icon.png',
        width: 1
      },
      {
        type: 'password',
        title: $translate.instant('FORM-BUILDER.PALLETTE.PASSWORD'),
        icon: 'images/form-builder/password-icon.png',
        width: 1
      },
      {
        type: 'multi-line-text',
        title: $translate.instant('FORM-BUILDER.PALLETTE.MULTILINE-TEXT'),
        icon: 'images/form-builder/multi-line-textfield-icon.png',
        width: 1
      },
      {
        type: 'table',
        title: $translate.instant('FORM-BUILDER.PALLETTE.TABLE'),
        icon: 'images/form-builder/dynamic-table-icon.png',
        width: 1
      },
      {
        type: 'integer',
        title: $translate.instant('FORM-BUILDER.PALLETTE.NUMBER'),
        icon: 'images/form-builder/numberfield-icon.png',
        width: 1
      },
      {
        type: 'decimal',
        title: $translate.instant('FORM-BUILDER.PALLETTE.DECIMAL'),
        icon: 'images/form-builder/decimalfield-icon.png',
        width: 1
      },
      {
        type: 'boolean',
        title: $translate.instant('FORM-BUILDER.PALLETTE.CHECKBOX'),
        icon: 'images/form-builder/booleanfield-icon.png',
        width: 1
      },
      {
        type: 'date',
        title: $translate.instant('FORM-BUILDER.PALLETTE.DATE'),
        icon: 'images/form-builder/datefield-icon.png',
        width: 1
      },
      {
        type: 'dropdown',
        title: $translate.instant('FORM-BUILDER.PALLETTE.DROPDOWN'),
        icon: 'images/form-builder/dropdownfield-icon.png',
        width: 1
      },
      {
        type: 'radio-buttons',
        title: $translate.instant('FORM-BUILDER.PALLETTE.RADIO'),
        icon: 'images/form-builder/choicefield-icon.png',
        width: 1
      },
      {
        type: 'people',
        title: $translate.instant('FORM-BUILDER.PALLETTE.PEOPLE'),
        icon: 'images/form-builder/peoplefield-icon.png',
        width: 1
      },
      {
        type: 'functional-group',
        title: $translate.instant('FORM-BUILDER.PALLETTE.GROUP-OF-PEOPLE'),
        icon: 'images/form-builder/peoplefield-icon.png',
        width: 1
      },
      {
        type: 'upload',
        title: $translate.instant('FORM-BUILDER.PALLETTE.UPLOAD'),
        icon: 'images/form-builder/uploadfield-icon.png',
        width: 1
      },
      {
        type: 'expression',
        title: $translate.instant('FORM-BUILDER.PALLETTE.EXPRESSION'),
        icon: 'images/form-builder/readonly-icon.png',
        width: 1
      },
      {
        type: 'hyperlink',
        title: $translate.instant('FORM-BUILDER.PALLETTE.HYPERLINK'),
        icon: 'images/form-builder/hyperlink-icon.png',
        width: 1
      },
      {
        type: 'spacer',
        title: $translate.instant('FORM-BUILDER.PALLETTE.SPACER'),
        icon: 'images/form-builder/spacer-icon.png',
        width: 1
      },
      {
        type: 'horizontal-line',
        title: $translate.instant('FORM-BUILDER.PALLETTE.HORIZONTAL-LINE'),
        icon: 'images/form-builder/horizontal-line-icon.png',
        width: 1
      },
      {
        type: 'headline',
        title: $translate.instant('FORM-BUILDER.PALLETTE.HEADLINE'),
        icon: 'images/form-builder/headline-icon.png',
        width: 1
      },
      {
        type: 'headline-with-line',
        title: $translate.instant('FORM-BUILDER.PALLETTE.HEADLINE-WITH-LINE'),
        icon: 'images/form-builder/headline-with-line-icon.png',
        width: 1
      }
    ]

    //设置表单列数
    $scope.setFormCols = function(index){
      $rootScope.cols = index
     $scope.colWidth = (1/index*100).toFixed(2) + '%'
      for(var i=0;i<$rootScope.formItems.length;i++){
        $rootScope.formItems[i].layout = {}
        $rootScope.formItems[i].layout.row = index
      }
    }

    $scope.$watch(
      'formItems',
      function() {
        if ($scope.formLoaded) {
          $rootScope.formChanges = true
        }
      },
      true
    )

    $scope.$watch(
      'currentOutcomes',
      function() {
        if ($scope.formLoaded) {
          $rootScope.formChanges = true
        }
      },
      true
    )

    $scope.addOutcome = function() {
      $rootScope.currentOutcomes[$rootScope.currentOutcomes.length] = { name: '' }
    }

    $scope.removeOutcome = function(index) {
      $rootScope.currentOutcomes.splice(index, 1)
    }

    $scope.$on('$locationChangeStart', function(event, next, current) {
      if (!$rootScope.ignoreChanges && $rootScope.formChanges) {
        // Always prevent location from changing. We'll use a popup to determine the action we want to take
        event.preventDefault()

        var discardCallback = function() {
          $rootScope.ignoreChanges = true
          $location.url(next.substring(next.indexOf('/#') + 2))
        }

        var continueEditingCallback = function() {
          // Don't change the location and make sure "main navigation" is still correct
          $rootScope.ignoreChanges = false
          $rootScope.setMainPageById('forms')
        }

        $scope.yesNoCancel = false
        showDiscardPopup($scope, null, discardCallback, continueEditingCallback)
      } else {
        // Clear marker
        $rootScope.ignoreChanges = false
      }
    })

    $scope.$on('formChangesEvent', function() {
      var discardCallback = function() {
        $scope.$broadcast('discardDataEvent')
      }

      var saveDataCallback = function() {
        $scope.$broadcast('mustSaveEvent')
      }

      var continueEditingCallback = function() {
        $scope.$broadcast('continueEditingEvent')
      }

      $scope.yesNoCancel = true
      showDiscardPopup($scope, saveDataCallback, discardCallback, continueEditingCallback)
    })

    function showDiscardPopup($scope, saveCallback, discardCallback, cancelCallback) {
      if (!$scope.unsavedChangesModalInstance) {
        $scope.handleResponseFunction = function(discard) {
          $scope.unsavedChangesModalInstance = undefined
          if (discard == true) {
            if (discardCallback) {
              discardCallback()
            }
          } else if (discard == false) {
            if (saveCallback) {
              saveCallback()
            }
          } else {
            if (cancelCallback) {
              cancelCallback()
            }
          }
        }

        _internalCreateModal(
          {
            template: 'editor-app/popups/unsaved-changes.html',
            scope: $scope
          },
          $modal,
          $scope
        )
      }
    }

    // get current step and sequential steps for form field resolving
    if ($rootScope.editorHistory && $rootScope.editorHistory.length > 0) {
      $scope.stepId = $rootScope.editorHistory[0].stepId
      $scope.allSteps = $rootScope.editorHistory[0].allSteps
    }
  }
])
